<template>
  <el-dialog v-model="showHandlePay" title="请选择收款方式" width="30%" center>
    <el-row justify="center">
      <el-button :icon="Money" size="large" @click="cash">现金收款</el-button>
      <el-button :icon="FullScreen" size="large" @click="scan">扫码支付</el-button>
    </el-row>
  </el-dialog>
  <el-dialog v-model="showCashPay" title="现金收款" width="40%" center>
    <el-row justify="center">
      <el-table :data="payBo.detailObject"
                height="50vh"
                style="width: 100%;"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column prop="goodsName" label="商品名"  />
        <el-table-column prop="price" label="单价" />
        <el-table-column prop="num" label="数量" />
        <el-table-column label="金额">
          <template #default="scope">
            <el-text>{{scope.row.num * scope.row.price}}</el-text>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right;width: 100%">
        <div v-if="payBo.attach!==''">
          <el-text>优惠：{{getAttach(payBo.attach)}}</el-text>
        </div>
        <div>
          <el-text size="large">总计：{{payBo.total}}元</el-text>
        </div>
      </div>

    </el-row>
    <template #footer>
      <span style="text-align: right">
        <el-button type="success" @click="confirm">
          确认收款
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-popover v-if="payBo!==undefined" :visible.sync="showScanPay" :before-close="handleClose" title="扫码支付" width="20%" center>

    <el-row justify="center">
      <div ref="qrCodeUrl"></div>
      <div style="width: 100%;text-align: center">
        <div v-if="payBo.attach!==''">
          <el-text>优惠：{{getAttach(payBo.attach)}}</el-text>
        </div>
        <div>
          <el-text size="large">总计：{{payBo.total}}元</el-text>
        </div>
        <div>
          <el-button @click="cancel">
            取消
          </el-button>
        </div>
      </div>
    </el-row>
  </el-popover>

</template>

<script setup>
import {
  Money,FullScreen
} from '@element-plus/icons-vue'
import {getCurrentInstance, nextTick, reactive, ref} from "vue";
import request from "@/utils/request";
import QRCode from 'qrcodejs2';
import {ElMessage} from "element-plus";

let showHandlePay=ref(false)
let showCashPay=ref(false)
let showScanPay=ref(false)
const payBo=ref()
const emit = defineEmits(['confirmHandlePay'])
let timer=ref()
const show = (data) => {
  showHandlePay.value=true
  payBo.value=data
}

const cash = () => {
  request.post("/pay/placeOrder/quick",payBo.value).then(res=>{
    payBo.value=res.data
    showCashPay.value=true
  })
}
const scan = () => {
  request.post("/pay/placeOrder/native",payBo.value).then(res=>{
    payBo.value=res.data
    showQRCode()
    timer = setInterval(() => {
      request.post("/pay/queryOrder",payBo.value).then(res=>{
        if (res.data==="SUCCESS"){
          ElMessage({
            message: '支付成功',
            type: 'success',
          })
          clearInterval(timer);
          showScanPay.value=false
          showHandlePay.value=false

          emit("confirmHandlePay")
        }else if(res.code===5) {
          ElMessage({
            message: res.message,
            type: 'error',
          })
          clearInterval(timer);
          showScanPay.value=false
          showHandlePay.value=false
        }else if(res.code===14){
          clearInterval(timer);
          showScanPay.value=false
          showHandlePay.value=false
        }
      })
    }, 1000);

  })
}

const confirm = () => {
  showCashPay.value=false
  showHandlePay.value=false
  emit("confirmHandlePay")
}

const { proxy } = getCurrentInstance()
const state = reactive({
  dialogVisible: false,
        qrcode: null
})
const showQRCode = () => {
  showScanPay.value=true
  creatQrCode()// 打开弹窗时生成二维码
}
const handleClose = () => {
  state.dialogVisible = true
  proxy.$refs.qrCodeUrl.innerHTML = '' // 关闭弹窗清除上一次的二维码
}
const creatQrCode = () => {
  nextTick(() => {
    // new QRCode创建一个实例，第一个参数是承载二维码的元素，第二个参数是二维码配置信息
    state.qrcode = new QRCode(proxy.$refs.qrCodeUrl, {
      text: payBo.value.codeUrl, // 二维码承载信息
      width: 150,
      height: 150,
      colorDark: '#000000',
      colorLight: '#ffffff',
      correctLevel: QRCode.CorrectLevel.H  // 容错级别
    })
  })
}
const getAttach = (attach) => {
  let s=attach.split("|")
  let rs=""
  for (let i in s){
    if (s[i]!==""&&s[i].indexOf("赠送")===-1)
      rs=rs+" "+s[i]
  }
  return rs
}
const cancel = () => {
  clearInterval(timer);
  showScanPay.value=false
  showHandlePay.value=false
}

defineExpose({
  show,
})
</script>

<style scoped>

</style>